<template>
  <el-dialog
    :title="this.title + ' 属性'"
    :visible.sync="PropertyData.dialogVisible"
    class="small"
  >
    <div class="filter-container">
      <el-tabs tab-position="top">
        <el-tab-pane label="基本信息">
          <!-- ref="form" :model="form"  -->
          <el-form label-width="80px">
            <div label="" class="item">
              <svg class="icon iconcalss" aria-hidden="true">
                <use
                  :xlink:href="
                    iconType(this.getDocumentInfoData.fileExtension).class
                  "
                />
              </svg>
              <el-input
                v-model="inputData"
                :placeholder="
                  getDocumentInfoData.documentName +
                    this.getDocumentInfoData.fileExtension ||
                  getDocumentInfoData.folderName
                "
              />
            </div>
            <el-divider
              v-if="
                this.getDocumentInfoData.fileExtension ||
                this.getDocumentInfoData.folderCount
              "
            />
            <el-form-item label="文件类型：">
              {{ this.getDocumentInfoData.fileExtension || '文件夹' }}
            </el-form-item>
            <el-form-item
              v-if="this.getDocumentInfoData.folderCount"
              label="包含："
            >
              {{ this.getDocumentInfoData.folderCount + '个文件夹' }},
              {{ this.getDocumentInfoData.documentCount + '个文件' }}
            </el-form-item>
            <el-divider />
            <el-form-item label="位置："
              >{{ getDocumentInfoData.location }}
            </el-form-item>
            <el-form-item label="大小："
              >{{ getDocumentInfoData.size }}
            </el-form-item>
            <el-divider />
            <el-form-item label="创建时间:"
              >{{ getDocumentInfoData.createTime }}
            </el-form-item>
            <el-form-item label="修改时间:"
              >{{ getDocumentInfoData.updateTime }}
            </el-form-item>
            <el-form-item label="访问时间:"
              >{{ getDocumentInfoData.accessTime }}
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="this.dataList.documentId" label="版本">
          <el-table :data="tableData" height="300">
            <el-table-column class="tac" prop="documentCode" label="文件编号" />
            <el-table-column prop="version" class="tac" label="版本号" />
            <el-table-column
              prop="level"
              class="tac"
              label="文件等级"
              :formatter="
                (row, column, cellValue) => {
                  return levelList[cellValue]
                }
              "
            />
            <el-table-column
              prop="latestVersionFlag"
              class="tac"
              label="是否最新版本"
              :formatter="
                (row, column, cellValue) => {
                  return latestVersionFlaglist[cellValue]
                }
              "
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane v-if="this.dataList.documentId" label="关联">
          <el-table :data="relationData" style="width: 100%" height="300">
            <el-table-column prop="documentName" label="文称" width="180">
              <template slot-scope="scope">
                <span style="cursor: pointer" @click="updateDocument(scope.row)"
                  ><svg class="icon" aria-hidden="true">
                    <use
                      :xlink:href="iconType(scope.row.fileExtension).class"
                    />
                  </svg>
                  {{ scope.row.documentName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="relation"
              label="关联关系"
              width="180"
              :formatter="
                (row, column, cellValue) => {
                  return relationList[cellValue]
                }
              "
            />
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column prop="createUserName" class="tac" label="操作人" />
            <el-table-column label="操作" align="center" fixed="right">   
              <template slot-scope="scope" >
                <el-dropdown trigger="click" class="filter-item" v-if="scope.row.relation!=2" >
                  <el-button type="text" class="el-icon-more"  />
                  <el-dropdown-menu slot="dropdown" class="user-dropdown" >
                    <el-dropdown-item @click.native="cancel(scope.row)" >
                      取消关联
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane v-if="this.dataList.documentId" label="记录">
          <el-table height="300" :data="listDataTerr">
            <el-table-column
              class="tac"
              prop="accessType"
              label="最近操作"
              :formatter="
                (row, column, cellValue) => {
                  return operationList[cellValue]
                }
              "
            />
            <el-table-column
              prop="createTimeString"
              class="tac"
              label="操作时间"
            />

            <!-- <el-table-column
              prop="level"
              class="tac"
              label="文件等级"
              :formatter="
                (row, column, cellValue) => {
                  return levelList[cellValue]
                }
              "
            >
            </el-table-column> -->
            <!-- <el-table-column
              prop="latestVersionFlag"
              class="tac"
              label="是否最新版本"
              :formatter="
                (row, column, cellValue) => {
                  return latestVersionFlaglist[cellValue]
                }
              "
            >
            </el-table-column> -->
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="PropertyData.dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="offRelation">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { unity } from '@/styles/js/setIconType.js'

import {
  getDocumentInfo,
  updateDocument,
  pageRelation,
  listData,
  deleteRelevance
} from '@/api/fd/document.js'
import { getFolderInfo, updateNameFolder } from '@/api/fd/folder.js'
import { getHistoryData } from '@/api/xd/documentFlow'

export default {
  name: 'Index',
  props: ['PropertyData'],
  data() {
    return {
      iconType: unity.setIconType,
      dataList: '',
      getDocumentInfoData: '',
      title: '',
      tableData: [],
      relationList: {
        1: '关联',
        2: '被关联',
        3: '相互关联'
      },
      levelList: {
        0: '普通文件',
        1: '一级文件',
        2: '二级文件',
        3: '三级文件',
        4: '四级文件'
      },
      latestVersionFlaglist: {
        0: '最新版本',
        1: '否'
      },
      operationList: {
        1: '可见',
        2: '预览',
        4: '打印',
        8: '下载',
        16: '重命名',
        32: '收藏',
        64: '移动',
        128: '复制',
        256: '编辑',
        512: '新增',
        1024: '分享',
        2048: '关联',
        4096: '删除'
      },
      relevanceData: [],
      repositoryId: '',
      inputData: '',
      relationData: [],
      listDataTerr: [],
      myDocumentId: '',
      toDocumentId: ''
    }
  },
  watch: {
    PropertyData(val) {
      console.log(val, 'val')
      this.dataList = val.dataList
      this.getDocumentInfo()
      if (this.dataList.documentId) {
        this.history()
      }
      this.pageRelation(this.dataList)
      this.listData()
    }
  },
  mounted() {},
  methods: {
    // 获取基本信息
    async getDocumentInfo() {
      if (this.dataList.documentId) {
        const data = await getDocumentInfo({
          documentId: this.dataList.documentId
        })
        this.getDocumentInfoData = data.data
        this.title =
          this.getDocumentInfoData.documentName +
          this.getDocumentInfoData.fileExtension
      } else {
        const data = await getFolderInfo({
          folderId: this.dataList.folderId
        })
        this.getDocumentInfoData = data.data
        this.title = this.getDocumentInfoData.folderName
      }
    },
    // 历史版本
    async history() {
      const tableDatalist = await getHistoryData({
        documentId: this.dataList.documentId
      })
      this.tableData = tableDatalist.data
    },
    // 文件关联
    async pageRelation(data) {
      const dataList = await pageRelation({
        myDocumentId: data.documentId
      })

      this.relationData = dataList.data
    },
    // 确定修改
    async offRelation() {
      this.PropertyData.dialogVisible = false
      if (this.inputData != '') {
        if (this.dataList.documentId) {
          var param = {
            documentId: this.dataList.documentId,
            documentName: this.inputData
          }
          updateDocument(param).then((res) => {
            this.$message.success('修改成功')
            this.$parent.getList()
          })
        } else if (this.dataList.folderId) {
          var param = {
            folderId: this.dataList.folderId,
            folderName: this.inputData
          }
          updateNameFolder(param).then((res) => {
            this.$message.success('修改成功')
            this.$parent.getList()
          })
        }
      }
    },
    updateDocument(row) {
      window.open(
        'onlyoffice/createDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          row.documentId +
          '&mode=edit' +
          '&urldata=' +
          process.env.VUE_APP_BASE_API
      )
    },
    // 记录
    async listData() {
      const data = await listData({
        documentId: this.dataList.documentId
      })
      this.listDataTerr = data.data
    },
    // 取消关联
    cancel(row) {
      console.log(this.dataList,row);
      deleteRelevance({myDocumentId:this.dataList.documentId,toDocumentId:row.documentId}).then(res=>{
        if(res.code==1){
          this.$message.success('取消关联成功')
          this.pageRelation(this.dataList)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconcalss {
  width: 50px;
  font-size: 40px;
  margin-right: 20px;
}

.el-divider--horizontal {
  margin: 14px 0;
}
</style>
